<template>
  <div>
    <seeAdvice ref="writeAdvice" @competeAdvice="getAllAdvice"></seeAdvice>
    <advice
      v-for="(item, index) in adviceItem"
      :key="item.id"
      :advice="item.content"
      :username="item.realname"
      :id="item.id"
      :time="item.time"
      :realname="item.username"
      @IfDel="IfDel(index)"
      @click.native="showAdviceContent"
    ></advice>
    <div
      class="msg"
      :style="[{ transform: 'rotate(' + deg + ')' }]"
      @click="addAdvice"
      @mouseenter="live2dAboutGetAdvice"
    >
      <div class="O"></div>
      <span>
        点击此处留下你宝贵的建议或者想要留下的话
        <span class="warn">(本站不易请 不要打广告)</span>
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import advice from "@/components/advice.vue";
import seeAdvice from "./seeAdvice.vue";
import Bus from "../../bus";
import { adviceType } from "@/type/advice";
import $axios from "@/http";
import { nextTick, onMounted, computed, ref } from "vue";
import { useUserStore } from "@/store";
import { writeAdviceType } from "@/type/advice";
onMounted(() => {
  nextTick(() => {
    let PCDom = document.querySelector(".PCindex");
    PCDom && (PCDom.scrollTop = 0);
  });
  getAllAdvice();
});

const $store = useUserStore();
const adviceItem = ref<Array<adviceType>>([]);
const showMsg = ref<boolean>(false);
const textofTip = ref<string>("");
const showTip = ref<boolean>(false);
const currentDelIndex = ref<number>(0);
const flag = ref<boolean>(true);
const showAdd = ref<boolean>(false);
const writeAdvice = ref<writeAdviceType | null>(null);

const deg = computed(() => Math.floor((0.5 - Math.random()) * 40) + "deg");
const live2dAboutGetAdvice = () => {
  Bus.$emit("live2dAboutGetAdvice");
};

const showAdviceContent = () => {
  writeAdvice.value && (writeAdvice.value.writeAdvice = false);
};
const config = () => {
  $axios
    .post("/advice/del", {
      id: adviceItem.value[currentDelIndex.value].id,
      username: $store.user.username,
    })
    .then((res) => {
      if (res.data.error === -1) {
        showTip.value = false;

        writeAdvice.value && (writeAdvice.value.ifSee = false);
        getAllAdvice();
      } else {
        writeAdvice.value && (writeAdvice.value.ifSee = false);
        showTip.value = false;
      }
    });
};
const cancel = () => {
  showTip.value = false;
};
const IfDel = (index: number) => {
  currentDelIndex.value = index;
  showTip.value = true;
  textofTip.value = "你确定要删除吗";
};
const getAllAdvice = () => {
  $axios
    .get("/advice/search")
    .then((res) => {
      if (res.data.error === -1) {
        adviceItem.value = res.data.data;
        showAdd.value = true;
      } else if (res.data.error === 0) {
        adviceItem.value = [];
      }
    })
    .catch((err) => {
      Bus.$emit("live2dAboutSendError");
    });
};
const addAdvice = () => {
  writeAdvice.value && (writeAdvice.value.color = "rgba(255,255,255,.5)");
  writeAdvice.value && (writeAdvice.value.writeAdvice = true);
  writeAdvice.value && (writeAdvice.value.ifSee = true);
};
</script>

<style lang="scss" scoped>
@import url("../../css/comment/animate.css");
.msg {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 23px;
  background-color: rgba(255, 255, 255, 0.5);
  display: inline-block;
  padding: 35px 15px;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.5s;
  // transform: rotate(15deg);
  box-sizing: border-box;
  vertical-align: top;
  border-radius: 35px;
  span {
    font-family: "advice";
    letter-spacing: 2px;
    font-size: 18px;
    .warn {
      color: red;
    }
  }
}
.msg:hover {
  box-shadow: 5px 5px 5px 3px rgba(0, 0, 0, 0.5);
  transform: scale(1.1) !important;
}
.O {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #fff;
  top: 5px;
  left: 20px;
}
@font-face {
  font-family: "advice";
  src: url("../../assets/font/advice (2).woff");
  src: url("../../assets/font/advice (2).woff") format("woff");
}
</style>
